<template>
  <div style = "padding: 10px">
    <div style = "margin: 10px  0">
      <el-input style="width: 300px" placeholder="请输入名称" v-model="student_name" clearable></el-input>
      <el-button type="warning" @click="load" style="margin-left: 5px"> <el-icon><Search /></el-icon></el-button>
      <el-button type="warning"  @click ="reset">重置</el-button>
      <el-button type="warning"  @click ="handleAdd"> <el-icon size="15"  ><Plus /></el-icon></el-button>
      <div style = "margin: 10px  0;padding-right:20px">
      <div class="flex">
      </div>

    <el-table :data = "state.tableData"  style="width: 100%">
      <el-table-column prop="student_id" label="学号"  />
      <el-table-column prop="student_name" label="姓名"  />
      <el-table-column prop="student_nation" label="民族" />
      <el-table-column prop="student_grade" label="年级" />
      <el-table-column prop="student_college" label="学院" />
      <el-table-column prop="student_total" label="总分" />
      <el-table-column prop="student_scholarship_name" label="奖学金" />
      <el-table-column prop="student_createtime" label="创建时间" />


      <el-table-column label="编辑" >
        <template #default="scope">
          <el-button size="small" @click="handleEdit( scope.row,scope.$index) "
            ><el-icon><EditPen /></el-icon></el-button>

          <el-popconfirm
              title="确认删除吗?"
              @confirm="remove(scope.row.student_no)"
          >
            <template #reference>
              <el-button><el-icon><Delete /></el-icon></el-button>
            </template>
          </el-popconfirm>



        </template>
      </el-table-column>
    </el-table>

        <div style="margin: 10px 0 " >
          <el-pagination background layout="prev, pager, next,total,sizes"
                         v-model:current-page="pageNum"
                         v-model:page-size="pageSize"
                         :page-sizes="[1, 5, 15, 20]"
                         :total="total"
                         @size-change="load"
                         @current-change="load"
          />
        </div>

      </div>
  </div>

    <el-dialog v-model="dialogFormVisible" title="编辑信息">
      <el-form :model="state.form" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model=state.form.student_name autocomplete="off" />
        </el-form-item>
        <el-form-item label="学号" >
          <el-input v-model=state.form.student_id autocomplete="off"/>
        </el-form-item>
        <el-form-item label="民族" >
          <el-input v-model=state.form.student_nation autocomplete="off"/>
        </el-form-item>
        <el-form-item label="年级" >
          <el-input v-model=state.form.student_grade autocomplete="off"/>
        </el-form-item>
        <el-form-item label="学院" >
          <el-input v-model=state.form.student_college autocomplete="off"/>
        </el-form-item>
        <el-form-item label="奖学金" >
          <el-input v-model=state.form.student_scholarship_name autocomplete="off"/>
        </el-form-item>

      </el-form>
      <template #footer>
      <span class="dialog-footer"><el-button type="primary" @click="save">确认</el-button>
       <el-button @click="dialogFormVisible = false">取消</el-button>

      </span>
      </template>
    </el-dialog>

  </div>
</template>



<script setup>

import {Delete, EditPen, Plus, Search} from "@element-plus/icons-vue";

import {reactive, ref} from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";



/*export default{
  name: 'Home',
  components:{
    Plus,
    EditPen,
    Delete,
    Search
  }}*/

const state = reactive({
  tableData : [],
  form:{},
})

const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(20)


const dialogFormVisible = ref(false)
const globalIndex = ref(-1)  //保存编辑的行号
const student_name = ref('')

const load = () => {
  let start = (pageNum.value - 1) *pageSize.value
  request.get('/student/page?student_name=' + student_name.value +'&start=' + start + '&pageSize=' +pageSize.value).then(res => {

    state.tableData =res.data.list
    total.value =res.data.total
  })
}
load()

// 新增数据    打开弹窗
const handleAdd = () => {
  state.form = {}
  dialogFormVisible.value = true  // 打开弹窗
}

//重置数据
const reset =() =>{
  student_name.value = ''
  load()
}


// 保存数据，把数据插入到 tableData里面，并刷新页面数据，弹窗关闭
const save = () => {

 /* if (globalIndex.value >= 0) {  // 表示编辑
    state.tableData[globalIndex.value] = state.form
    globalIndex.value = -1  // 还原回去
  } else {  // 新增
    state.tableData.push(state.form)
  }*/

 /* request.post('/student/save',state.form).then (res => {
    if (res.code === '100'){
      ElMessage.success('成功！')
      dialogFormVisible.value = false
    }
    else{
      ElMessage.error(res.msg)
    }
  })*/

  request({
    url:state.form.student_no ? '/student/update' :'/student/save',
    method:state.form.student_no ? 'PUT' : 'POST',
    data: state.form
  }).then (res => {
    if (res.code === '100'){
      ElMessage.success('成功！')
      load()
      dialogFormVisible.value = false
    }
    else{
      ElMessage.error(res.msg)
    }
  })
}


//编辑数据
const handleEdit = (row, index) => {
  const newObj = Object.assign({}, row)
  state.form = reactive(newObj)
  globalIndex.value = index
  dialogFormVisible.value = true
}

//删除数据
const remove = (student_no) => {
  request.delete  ('/student/delete?student_no=' + student_no).then(res => {
  if (res.code === '100'){
    ElMessage.success('成功！')
    load()
    dialogFormVisible.value = false
  }
  else{
    ElMessage.error(res.msg)
  }
})
}


</script>


